<template>
  <div class="card-container-root">
    <div class="title-con">

      <!--统计图表title容器-->
      <div class="title-txt">
        <!--蓝色短线-->
        <div class="blue-short-line"></div>
        <span>{{ title }}</span>

      </div>
      <div class="bt-con">
        <span @click="refresh">刷新</span>
      </div>
    </div>
    <div class="content-container">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String
    }
  },
  methods: {
    refresh() {
      this.$emit('refresh')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";

.card-container-root {
  height: 100%;
  width: 100%;
  box-sizing: border-box;

  .title-con, .content-container {
    width: 100%;
    box-sizing: border-box;
  }

  .title-con {
    height: 42px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    font-size: $second-font-size;
    box-sizing: border-box;
    // 设置统计图表title容器样式
    .title-txt {
      //设置内部元素位置
      display: flex;
      font-weight: 600;
      //设置蓝色短线样式
      .blue-short-line {
        // 设置蓝线大小
        width: 3px;
        height: 24px;
        // 蓝线颜色
        background: rgba(57, 117, 237, 1);
        margin-right: 15px; //设置与右侧文字间距
        margin-top: 3px; //设置与上边间距
      }
    }

    .bt-con {
      cursor: pointer;
      color: $bt-color;
      font-size: $thirdly-font-size;
    }
  }

  .content-container {
    height: calc(100% - 42px);
  }
}
</style>
